<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    const style = 'font-weight: bold;border-top-right-radius: 8px;border-bottom-right-radius: 8px;padding: 0 8px 0 4px;';
    let logger =  {
        ...console,

        log (msg) {
            console.log(`%clog:%c ${msg}`, `color: #fff;background:#333;${style}`, 'color: #333;')
        },

        dom (dom) {
            console.log(`[dom]:%O`, dom)
        },

        obj (obj) {
            console.log(`[object]:%o`, obj)
        },

        warn (msg) {
            console.log(`%cwarn:%c ${msg}`, `color: #fff;background:#dca60e;${style}`, 'color: #dca60e;')
        },

        error (msg) {
            console.log(`%cerror:%c ${msg}`, `color: #fff;background:#ea6464;${style}`, 'color: #ea6464;')
        }
    };

    logger.log('xxxxxxxxxxxxxxxxxxxx');
    logger.warn('xxxxxxxxxxxxxxxxxxxx');
    logger.error('xxxxxxxxxxxxxxxxxxxx');
    logger.dom(document.body);
    logger.obj(document.body);
    logger.obj({'xxxxxxxxxxxxxxxxxxxx': 'xxx'});

    const styles = [
        'color: green',
        'background: yellow',
        'font-size: 30px',
        'border: 1px solid red',
        'text-shadow: 2px 2px black',
        'padding: 10px',
    ].join(';'); // 2.连接单个数组项并将它们连接成一个用分号分隔的字符串（;）

    // 3.传递样式变量
    console.log('%cHello There', styles);
    // or
    console.log('%c%s', styles, 'Some Important Message Here');

    // Cyan
    console.log('\x1b[36m%s\x1b[0m', 'I am cyan');
    // Yellow
    console.log('\x1b[33m%s\x1b[0m', 'yellow' );

    // chalk/chalk 给 console 添加颜色
</script>
</body>
</html>
